<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素内部内容溢出</title>
        <style type="text/css">
            .outer { border: 1px solid blue ; margin: 5px ; }
            .inner { border: 1px solid red ; width: 800px ; height: 300px ; margin: 50px auto ; }
            /* 注意这里是选择 .first 内部的 .inner */
            .first .inner { /* 不指定 overflow */  }
            .second .inner { overflow: visible ; /* 当元素内部的内容超出元素边界时仍然显示超出部分 */  }
            .third .inner { overflow: scroll ; /* 为元素添加滚动条以便于显示其内部的内容 */  }
            .fourth .inner { overflow: auto ; /* 当元素添内部内容超出元素边界时就添加滚动条 */  }
            .fifth .inner { overflow: hidden ; /* 当元素内部的内容超出元素边界时就隐藏超出部分 */  }
        </style>
    </head>
    <body>

        <div class="outer first">
            <div class="inner">
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
                家君作宰，路出名区；童子何知，躬逢胜饯。
                <!-- nobr 是 HTML 5 中已经不在赞成使用的标记  -->
                <nobr>
                时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
                俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
                </nobr>
                层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>
                鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
                披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>
                闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
                云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>
                渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<br>
                遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
                睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
                四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>
                天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
                望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>
                关山难越，谁悲失路之人？
                萍水相逢，尽是他乡之客。
                怀帝阍而不见，奉宣室以何年？
            </div>
        </div>

        <div class="outer second">
            <div class="inner">
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
                家君作宰，路出名区；童子何知，躬逢胜饯。
                <!-- nobr 是 HTML 5 中已经不在赞成使用的标记  -->
                <nobr>
                    时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
                    俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
                </nobr>
                层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>
                鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
                披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>
                闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
                云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>
                渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<br>
                遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
                睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
                四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>
                天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
                望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>
                关山难越，谁悲失路之人？
                萍水相逢，尽是他乡之客。
                怀帝阍而不见，奉宣室以何年？
            </div>
        </div>

        <div class="outer third">
            <div class="inner">
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
                家君作宰，路出名区；童子何知，躬逢胜饯。
                <!-- nobr 是 HTML 5 中已经不在赞成使用的标记  -->
                <nobr>
                    时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
                    俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
                </nobr>
                层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>
                鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
                披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>
                闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
                云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>
                渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<br>
                遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
                睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
                四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>
                天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
                望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>
                关山难越，谁悲失路之人？
                萍水相逢，尽是他乡之客。
                怀帝阍而不见，奉宣室以何年？
            </div>
        </div>

        <div class="outer fourth">
            <div class="inner">
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
                家君作宰，路出名区；童子何知，躬逢胜饯。
                时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
                俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
                层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>
                鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
                披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>
                闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
                云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>
                渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<br>
                遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
                睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
                四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>
                天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
                望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>
                关山难越，谁悲失路之人？
                萍水相逢，尽是他乡之客。
                怀帝阍而不见，奉宣室以何年？
            </div>
        </div>

        <div class="outer fifth">
            <div class="inner">
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
                家君作宰，路出名区；童子何知，躬逢胜饯。
                <!-- nobr 是 HTML 5 中已经不在赞成使用的标记  -->
                <nobr>
                    时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
                    俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
                </nobr>
                层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>
                鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
                披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>
                闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。
                云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>
                渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<br>
                遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
                睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
                四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>
                天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
                望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>
                关山难越，谁悲失路之人？
                萍水相逢，尽是他乡之客。
                怀帝阍而不见，奉宣室以何年？
            </div>
        </div>

    </body>
</html>